<template>
  <div>
<ul v-for="item in list">
  <li>姓名：{{ item.name }}</li>
  <li>年龄：{{ item.age }}</li>
</ul>
  </div>
  <div>
    <table>
      <tr bgcolor="cyan">
        <th>用户借款编号</th>
        <th>借款用户账号</th>
        <th>借款款项名称</th>
        <th>借款金额</th>
        <th>剩余还款本金</th>
      </tr>
      <tr v-for="item in jlist">
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.jname }}</td>
        <td>{{ item.money }}</td>
        <td>{{ item.smoney }}</td>
      </tr>
    </table>
  </div>
  <div>
    <input type="text" v-model="s">
    <p>{{ s }}</p>
  </div>
</template>

<script setup lang="ts">

import {reactive,toRefs} from 'vue'

const data:any=reactive({
  list:[
    {name:'张大',age:'21'},
    {name:'李尔',age:'20'},
    {name:'刘珊',age:'22'},
    {name:'钱嗣',age:'25'},
    {name:'赵武',age:'24'},
    {name:'刘文畅',age:'24'},
  ],
  jlist:[
    {id:1,name:'zhangsan',jname:'八维助学金',money:400,smoney:0},
    {id:2,name:'zhangsan',jname:'八维助学金',money:10000,smoney:10000},
  ],
  s:'双向数据绑定演示'
})

let {list,jlist,s}=toRefs(data)



</script>

<style scoped>
ul{
  list-style: none;
}
li{
  margin: 20px;
}
</style>